<template>
    <div>
        <div class=title>热销推荐</div>
        <ul>
          <router-link
              tag="li"
              class='item border-bottom'
              v-for="item of recommendList"
              :key="item.id"
              :to="'/detail/' + item.id"
          >
            <img class='item-img'
                 :src=item.imgUrl
                 alt=''>
            <div class='item-info'>
              <p class='item-title'>{{item.title}}</p>
              <p class='item-desc'>{{item.desc}}</p>
              <button class='item-button'>详情介绍</button>
            </div>
          </router-link>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  }
}
</script>

<style lang='stylus' scoped>
    @import '~styles/mixins.styl'
    .title
        width 100%
        height .8rem
        line-height .8rem
        background-color #eee
        padding-left .44rem

    .item
        display flex
        width 100%
        height 1.7rem
        margin .1rem

        .item-img
            width 1.7rem

        .item-info
            padding .1rem
            margin-left .1rem
            min-width 0

            .item-title
                font-size .32rem
                font-weight bold
                ellipsis()

            .item-desc
                padding .2rem 0
                color #ccc
                ellipsis()

            .item-button
                padding 0 .1rem
                border-radius .1rem
                color #fff
                background-color #ff9300
</style>
